<template>
  <div class="auth-container">

    <a-card title="在线教育后台管理系统" class="auth-card" style="text-align: center;" bordered>

      <h1 class="title">{{ isRegistering ? '注册' : '登录' }}</h1>
      <a-form
          layout="vertical"
          v-if="!isRegistering"
          :model="loginFormState"
          @finish="handleLogin"
      >
        <a-form-item
            label="用户名"
            name="username"
            :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model:value="loginFormState.username" placeholder="请输入用户名">
            <template #prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码' }]">
          <a-input
              v-model:value="loginFormState.password"
              type="password"
              placeholder="请输入密码">
            <template #prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
              type="primary"
              html-type="submit"
              :disabled="loginFormState.username === '' || loginFormState.password === ''"
              block>
            登录
          </a-button>
        </a-form-item>
        <div class="extra-options">
          <a-checkbox v-model:value="rememberMe">记住我</a-checkbox>
          <a href="#forgot" class="forgot-password">忘记密码?</a>
        </div>
        <div class="footer-text">
          没有帐户？ <a @click.prevent="isRegistering = true">注册</a>
        </div>
      </a-form>

      <a-form
          layout="vertical"
          v-if="isRegistering"
          :model="registerFormState"
          @finish="handleRegister"
      >
        <a-form-item
            label="用户名"
            name="username"
            :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model:value="registerFormState.username" placeholder="请输入用户名">
            <template #prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
            label="邮箱"
            name="email"
            :rules="[{ required: true, type: 'email', message: '请输入有效的邮箱地址' }]">
          <a-input v-model:value="registerFormState.email" placeholder="请输入邮箱">
            <template #prefix>
              <MailOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码' }]">
          <a-input
              v-model:value="registerFormState.password"
              type="password"
              placeholder="请输入密码">
            <template #prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
            label="用户类型"
            name="userType"
            :rules="[{ required: true, message: '请选择用户类型' }]">
          <a-select v-model:value="registerFormState.userType" placeholder="请选择用户类型">
            <a-select-option value="teacher">老师</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button
              type="primary"
              html-type="submit"
              :disabled="registerFormState.username === '' || registerFormState.email === '' || registerFormState.password === ''"
              block>
            注册
          </a-button>
        </a-form-item>
        <div class="footer-text">
          已有帐户？ <a @click.prevent="isRegistering = false">登录</a>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons-vue'; // 导入邮件图标
import { useRouter } from 'vue-router';
import {getLogin, getUserInfo, registerUser} from '@/apis/user.js';
import { useUserStore } from '@/stores/user.js';

const loginFormState = reactive({
  username: '',
  password: '',
});

const registerFormState = reactive({
  username: '',
  email: '',
  password: '',
  userType: 'teacher', // 默认用户类型为老师
});

const rememberMe = ref(false);
const isRegistering = ref(false);

const router = useRouter();
const useUser = useUserStore();

const handleLogin = async (values) => {
  const res = await getLogin(values);
  const userInfo=await getUserInfo(res.data)
  if (userInfo.data.userType==='teacher'){
    useUser.setToken(res.data);
    useUser.setUserInfo(userInfo.data)
    router.push('/');
  }else {
    alert('用户类型错误');
    router.push('/login');
  }

};

const handleRegister = async (values) => {
  const res = await registerUser(values); // 这里调用注册 API
  isRegistering.value = false;

};
</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}



.auth-card {
  width: 500px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.47);
}

.title {
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
  color: rgb(30, 31, 34);
}

.extra-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.forgot-password {
  color: #1890ff;
  font-size: 14px;
}

.footer-text {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}
</style>
